<template>
    <div class="person">
        <h2>姓名：{{ player.name }}</h2>
        <h2>位置：{{ player.position }}</h2>
        <button @click="changePos">修改位置</button>
        <hr>
        <h2>游戏列表：</h2>
        <ul>
            <li v-for="game in games" v-bind:key="game.name">{{ game.name }}</li>
        </ul>
        <button v-on:click="changeFirstGame">修改第一个游戏的名字</button>
    </div>
</template>

<script setup lang="ts" name="Persona">
    import { reactive } from 'vue'  // reactive 函数将对象类型数据转化为响应式数据（只能定义对象类型）
    let player = reactive({
        name: 'zzq',
        position: 'PF',
        shooting: 'A'
    })
    let games = reactive([
        {name: "Balder's Gate", price: 298},
        {name: 'Sora no Kiseki', price: 98}
    ])

    console.log(player)             // 此时 player 是一个 proxy 对象，并且不论对象层次多深都可以变为响应式（数组、函数都是对象）
    let pos = ['PG', 'SG', 'SF', 'PF', 'C']
    function changePos(){
        let idx = pos.indexOf(player.position)
        console.log(`pos idx 原本是 ${idx}`)
        idx = ++idx % 5
        console.log(`pos idx 现在是 ${idx}`)
        player.position = pos[idx]
    }
    function changeFirstGame(){
        games[0].name = "Baldur's Gate"
    }
</script>

<style scoped>
.person {
    background-color: #d8a7af;
    border-radius: 10px;
    box-shadow: 0 0 10px;
    padding: 20px;
    margin: 10px 0;
}
</style>
